<template>
  <div id="JS_GsMapHome"></div>
</template>

<script lang="ts" setup>
import { defineComponent } from 'vue';
import rotationBorder1URL from './assets/rotationBorder1.png';
import rotationBorder2URL from './assets/rotationBorder2.png';
import { onMounted, onBeforeUnmount } from 'vue';
import { ILMSDisplay, PopupService } from './popupServer';
import {HomeService, TAB_TYPE} from "@/views/home/homeService";

defineComponent({ name: 'HomeGis' });

let lmsDisplay: ILMSDisplay | null = null;
let popupIns: PopupService | null = null;

/**
 * 初始化gis
 */
const initGis = () => {
  try {
    CameraControls.install({ THREE });
    lmsDisplay = new IndoorThree.LMSDisplay({
      target: 'JS_GsMapHome',
      // scale: 0.000001,
      worker: true,
      // polar: 0.804725609259662,
      polar: 0.5, // 角度
      azimuth: -0.44993540039175434,
      dplane_img: [rotationBorder1URL, rotationBorder2URL],
      // baseMap: CONST_China_WGS84_2,
      // userMap: CONST_China_SiChuan_WGS84,
      baseMap: CONST_GeoData_China,
      baseMap_line: CONST_GeoData_China_line,
      userMap: CONST_GeoData_Item,
      userMap_inline: CONST_GeoData_Item_inline,
      userMap_outline: CONST_GeoData_Item_outline,
      expand: 0.8,
      dataType: 2,
      bgTransparent: true, //背景透明（为true需关闭泛光）
      closeFog: true, //雾
      closeBloom: true, //泛光
      closeGridPoint: true, //网格
      closeCubePlane: true, //关闭扩散波纹
      closeUpParticles: false, //上升粒子
      // closeBaseMap: true, //基础底图
      wall_scale: 1.2,
      dplane_scale: 1.2,
      dplane_opacity: 1,
      upHeight_scale: 2.5,
      cylinder_scale: 2.5,
      cylinderSize_scale: 1.5,
      boxSize_scale: 2,
      particles_scale: 0.5,
      particles_dot_scale: 0.3,
    });
    // 背景透明
    // window.lmsDisplay.m_ThreeMap.getView().getRenderer().setClearAlpha(0);
    // 气泡
    popupIns = PopupService.getIns(lmsDisplay);
    // hover事件
    lmsDisplay!.onADZoneActived = function (data: any, e: any) {
      if (data) {
        const pAttributes = data.getAttributes();
        const coordinate = e.gsPopop_Coordinate;
        const name = pAttributes.get('name');
        popupIns?.show(coordinate, { name });
      } else {
        popupIns?.close();
      }
    };
    lmsDisplay!.onADZoneSelected = function (data: any, e: any) {
      if (data) {
        const pAttributes = data.getAttributes();
        const name = pAttributes.get('name');
        if (name === '合肥市' && HomeService.tabType.value === TAB_TYPE.TSGZ) HomeService.cityType.value = '2'
      }
    }

  } catch (e) {
    console.error('首页gis初始化失败', e);
  }
};


onMounted(() => {
  setTimeout(() => {
    initGis();
  }, 20);
});

onBeforeUnmount(() => {
  popupIns?.clear();
  lmsDisplay?.Release();
});
</script>

<style scoped lang="scss">
#JS_GsMapHome {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: -2;
}
</style>
